7-1 峔搣妡P宒

我們在之前的章節已經簡單地介紹過表單，由於表單是使用者與伺服器之間互動的主要機制，所以我們會在這個章節仔細地介紹表單，尤其是表單內的各種控制項（Controls），以及其屬性與對應的性質。
表單（Forms）是使用者經由網頁與伺服器進行互動的最常見方式。一般來說，使用者必須經由表單的填寫，才能將客戶端的資料送回伺服器端。一個簡單表單的原始碼如下：
<form name=formName id=formId method=post action=example/formact.asp target=_blank> 貴姓大名：<input type=text name=UserName value="Test Input"> <input type=submit> <input type=reset> </form> 在網頁呈現的效果如下：

在上例中，一旦使用者按下「送出查詢」的按鈕，瀏覽器就將表單元素的值（例如上述範例中的「Test Input」）送回伺服器，並在伺服器以「example/formact.asp」的程式碼來處理收到的資訊，最後將處理結果回傳給瀏覽器。有關於伺服器處理表單資料的細節，我們會在本書第二篇與伺服器相關章節裡有更詳細的說明。
表單標籤在 HTML 原始碼內可以有許多屬性（Attributes），例如 name 代表表單的名稱，method 代表瀏覽器將表單資料送至伺服器的方式，action 代表在伺服器端、負責處理表單資料的程式檔，target 則代表伺服器回傳資料後，用戶端用於呈現此資料的視窗名稱。但在使用 JavaScript 或 VBScript 時，表單被視為一個物件，此物件即有各種性質（Properties）和方法（Methods）。表單標籤的屬性和表單物件的性質，幾乎有著一對一的對應關係，但必須注意的是，屬性是用於 HTML，而性質則是用在 JavaScript 或 VBScript 之中。以下將針對常用的「表單標籤的屬性」和「表單物件的性質」進行列表說明。
表單標籤的屬性及說明

表單標籤的屬性說明對應的表單物件性質及說明
name 表單的名稱，可被 JavaScript 或 VBScript 用以存取表單及其相關物件。例如，我們可用 document.formName 或是 document.forms["formName"] 來取得此表單物件。
id 表單的名稱，可被 JavaScript 或 VBScript 用以存取表單及其相關物件。使用 id 時，我們可以不必經由 DOM 的階層式架構來取得表單物件，例如，我們可以直接使用 document.getElementById(formId) 或是 document.all["formId"] 來取得此表單物件。id 的值在整個網頁必須是唯一的，以避免和其他物件產生衝突。
target 伺服器回傳資訊必須出現的位置，可以是一個視窗 (Window)、框架 (Frame)，或是 _top、_parent、_self、_blank。若無此屬性，，則回傳結果將出現於原視窗。對應的性質是 target，例如：

action 指定伺服器端的處理程式。此處理程式可以位於網路上的任一台伺服器，也可以使用 mailto:xxx@xxx.xxx 的方式來將表單資訊經由電子郵件寄出。對應的性質是 action，例如：

method 指定資料傳送的方式，可有兩種方式：

get: 表單資料經由 QUERY_STRING 的環境變數送至伺服器，這是預設的方式，但傳送資料量有限，通常只限於 1 KB 左右。
post: 表單資料經由 standard input 傳送，資料長度儲存於 CONTENT_LENGTH 的環境變數，傳送資料可大於 1 MB。
對應的性質是 method，例如：

enctype 指定 MIME 的編碼方式來傳送資料，可以有兩種值："application/x-www-form-urlencoded" (預設值) 或 "multipart/form-data"。對應的性質是 encoding，例如：

onSubmit JavaScript 或 VBScript 的事件處理器，若回傳值為 false，則表單將不會被送出。此屬性通常用來檢查使用者所填入的表單資料是否正確，若不正確，就不將表單資料送到伺服器。對應的性質是 onSubmit。

此外，表單物件也有一些性質，是無法和表單標籤對應的，例如 elements（由表單元素所形成的陣列）和 Length（表單元素的個數）等，以下我們列出一個表單物件的所有性質，讓大家參考：
Example（formProp01.htm）：
其原始碼為：
原始檔（formProp01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>表單的性質列表</h2>
<hr>
<form name=formName id=formId method=post action=formact.asp target=_blank>
	貴姓大名：<input type=text name=UserName value="Test Input">
	<input type=submit> <input type=reset>
</form>
<hr>

<script src="listProp.js"></script>
以下使用 listProp(formId, "formId") 來列出上述表單的所有性質。
你也可以使用 listProp(document.formName, "document.formName") 來達到同樣的功能喔。
<p><h3>"document.formName" 的性質列表：</h3>
<p><script>listProp(formId, "formId")</script>

<hr>
</body>
</html>
當然，隨著瀏覽器的更新，表單的性質也會越來越多，其中最重要的性質當然是 elements，這就是表單元素（或稱控制項）所形成的陣列，將會在下一節詳述。
一頁 HTML 中可以包含數個表單，但最好取用不同的名稱，以使 JavaScript 或 VBScript 能根據名稱來存取不同表單。但有時候為了程式碼簡潔，也可以不設定表單的 name 或 id 屬性，此時可以使用 document.forms[0], document.forms[1], document.forms[2] 等等來取得第０、１、２個表單，依此類推。
此外，在使用表單物件時，考慮到表單可能至於框架（Frames）之中，因此取用一個性質的完整方法為：
window.parent.frames[0].document.forms[0].property 但是框架的使用也是越來越少，所以就可以不必這麼麻煩。
JavaScript 程式設計與應用：用於網頁用戶端

表單標籤的屬性	說明	對應的表單物件性質及說明
name	表單的名稱，可被 JavaScript 或 VBScript 用以存取表單及其相關物件。	例如，我們可用 document.formName 或是 document.forms["formName"] 來取得此表單物件。
id	表單的名稱，可被 JavaScript 或 VBScript 用以存取表單及其相關物件。	使用 id 時，我們可以不必經由 DOM 的階層式架構來取得表單物件，例如，我們可以直接使用 document.getElementById(formId) 或是 document.all["formId"] 來取得此表單物件。id 的值在整個網頁必須是唯一的，以避免和其他物件產生衝突。
target	伺服器回傳資訊必須出現的位置，可以是一個視窗 (Window)、框架 (Frame)，或是 _top、_parent、_self、_blank。若無此屬性，，則回傳結果將出現於原視窗。	對應的性質是 target，例如：
action	指定伺服器端的處理程式。此處理程式可以位於網路上的任一台伺服器，也可以使用 mailto:xxx@xxx.xxx 的方式來將表單資訊經由電子郵件寄出。	對應的性質是 action，例如：
method	指定資料傳送的方式，可有兩種方式： get: 表單資料經由 QUERY_STRING 的環境變數送至伺服器，這是預設的方式，但傳送資料量有限，通常只限於 1 KB 左右。 post: 表單資料經由 standard input 傳送，資料長度儲存於 CONTENT_LENGTH 的環境變數，傳送資料可大於 1 MB。	對應的性質是 method，例如：
enctype	指定 MIME 的編碼方式來傳送資料，可以有兩種值："application/x-www-form-urlencoded" (預設值) 或 "multipart/form-data"。	對應的性質是 encoding，例如：
onSubmit	JavaScript 或 VBScript 的事件處理器，若回傳值為 false，則表單將不會被送出。此屬性通常用來檢查使用者所填入的表單資料是否正確，若不正確，就不將表單資料送到伺服器。	對應的性質是 onSubmit。